<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ include file="../../../common/taglib.jsp"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<sfa:mainTitle></sfa:mainTitle>
<link href="${path}/css/imageCut/main.css" type="text/css" rel="Stylesheet" />
    <script type="text/javascript" src="${path}/script/imageCut/jquery1.2.6.pack.js"></script>
    <script  type="text/javascript" src="${path}/script/imageCut/ui.core.packed.js" ></script>
    <script type="text/javascript" src="${path}/script/imageCut/ui.draggable.packed.js" ></script>
    <script type="text/javascript" src="${path}/script/imageCut/CutPic.js"></script>
    <script type="text/javascript">
        function Step1() {
            $("#Step2Container").hide();           
        }

        function Step2() {
            $("#CurruntPicContainer").hide();
        }
        function Step3() {
            $("#Step2Container").hide();          
       }
       
        function ajaxSaveCutImage(){
        	var data = $("#imageCutForm").serialize();
        	$.ajax({
        		type:'post',
        		dataType:'json',
        		url:'${path}/users/headPhoto/index/saveCutImage',
        		data:data,
        		success:function(result){
        			if(result.result != 'n'){
        				$("#imgphoto").attr("src",'${path}'+result.defaultPic);
        				$("#Step2Container").hide();
        				$("#CurruntPicContainer").show();
        			}else{
        				alert("保存失败！请将图片放到边框内");
        			}
        		}
        	});
        }
        
        function checkForm(){
        	var src=$("#fuPhoto").val();
        	if(src=="")
        	{
        		alert("请先选择图片再上传！");
        		return false;
        	}
        	var ext=src.substr(src.indexOf('.'),src.length);
        	if((ext.toLowerCase()).indexOf('.jpg') != -1 ||
        		(ext.toLowerCase()).indexOf('.jpeg') != -1 ||
        		(ext.toLowerCase()).indexOf('.bmp') != -1 ||
        		(ext.toLowerCase()).indexOf('.gif') != -1 ||
        		(ext.toLowerCase()).indexOf('.png') != -1){
        		return true;
        	}else
        	{
        		alert("图片格式不正确！请选择.jpg,.jpeg,.bmp,.gif,.png任意一种");
        	}
        	return false;
        }
    </script>
</head>
<body>
   

    <div>
     <div class="left">
         <!--当前照片-->
         <div id="CurruntPicContainer">
            <div class="title"><b>当前照片</b></div>
            <div class="photocontainer">
                <img id="imgphoto" src='${path}${defaultPic}' style="border-width:0px;" />
            </div>
         </div>
         <!--Step 2-->
         <div id="Step2Container">
           <div class="title"><b> 裁切头像照片</b></div>
           <div class="uploadtooltip">您可以拖动照片以裁剪满意的头像</div>                              
                   <div id="Canvas" class="uploaddiv">
                   
                            <div id="ImageDragContainer">                               
                               <img id="ImageDrag" class="imagePhoto" src="${path}${picUrl}" style="border-width:0px;" />                                                        
                            </div>
                            <div id="IconContainer">                               
                               <img id="ImageIcon" class="imagePhoto" src="${path}${picUrl}" style="border-width:0px;" />                                                        
                            </div>                          
                    </div>
                    <div class="uploaddiv">
                       <table>
                            <tr>
                                <td id="Min">
                                        <img alt="缩小" src="${path}/images/imageCut/_c.gif" onmouseover="this.src='${path}/images/imageCut/_c.gif';" onmouseout="this.src='${path}/images/imageCut/_h.gif';" id="moresmall" class="smallbig" />
                                </td>
                                <td>
                                    <div id="bar">
                                        <div class="child">
                                        </div>
                                    </div>
                                </td>
                                <td id="Max">
                                        <img alt="放大" src="${path}/images/imageCut/c.gif" onmouseover="this.src='${path}/images/imageCut/c.gif';" onmouseout="this.src='${path}/images/imageCut/h.gif';" id="morebig" class="smallbig" />
                                </td>
                            </tr>
                        </table>
                    </div>
                    <form id="imageCutForm">
                    <input type="hidden" name="picture" value="${picUrl}"/>
                    <div class="uploaddiv">
                        <input type="button" name="btn_Image" value="保存头像" onclick ='ajaxSaveCutImage()' id="btn_Image" />
                    </div>           
                    <div>
         <!--图片实际宽度： --><input name="txt_width" type="hidden" value="1" id="txt_width" /><br />
         <!--图片实际高度： --><input name="txt_height" type="hidden" value="1" id="txt_height" /><br /> 
         <!--距离顶部： --><input name="txt_top" type="hidden" value="82" id="txt_top" /><br /> 
         <!--距离左边： --><input name="txt_left" type="hidden" value="73" id="txt_left" /><br /> 
         <!--截取框的宽： --><input name="txt_DropWidth" type="hidden" value="120" id="txt_DropWidth" /><br /> 
         <!--截取框的高： --><input name="txt_DropHeight" type=hidden value="120" id="txt_DropHeight" /><br /> 
         <!--放大倍数： --><input name="txt_Zoom" type="hidden" id="txt_Zoom" />
                   </div>  </form>
         </div>
     
     </div>
      <form name="form1" method="post" action="${path}/users/headPhoto/index/upLoadImage" id="form1" enctype="multipart/form-data">
     <div class="right">
         <!--Step 1-->
         <div id="Step1Container">
            <div class="title"><b>更换照片</b></div>
            <div id="uploadcontainer">
                <div class="uploadtooltip">请选择新的照片文件，文件需小于2.5MB</div>
                <div class="uploaddiv"><input type="file" name="fuPhoto" id="fuPhoto" title="选择照片" /></div>
                <div class="uploaddiv"><input type="submit" name="btnUpload" value="上 传" id="btnUpload" onclick="return checkForm()"/></div>
            </div>
         
         </div>
     </div>
     </form>
    </div>
      
      <c:if test="${picUrl==null}">
      	<script type='text/javascript'>Step1();</script>
      </c:if>
       <c:if test="${step==2}">
      	<script type='text/javascript'>Step2();</script>
      </c:if>
       <c:if test="${step==3}">
      	<script type='text/javascript'>Step3();</script>
      </c:if>

</body>
</html>